import React from 'react';
import { WeaInputLocale, WeaDialog, WeaLocaleProvider, WeaNewScroll } from 'ecCom';
import { Button, Table } from 'antd';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class APIShowTableSingle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
    };
  }
    @observable subTable = {};
    @observable columnName;
    @observable visible = false;
    render = () => (
      <div>
        {this.getBase()}
        {this.getDialog()}
      </div>
    )
    getDialog() {
      const { subList } = this.props;
      const buttons = [
        <Button
          ecId={`${this && this.props && this.props.ecId || ''}_Button@dko0s0@close`}
          type="ghost"
          onClick={() => this.visible = false}
        >
          {getLabel(309, '关闭')}
        </Button>,
      ];
      return (
        this.subTable && <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4ke8em`}
          scalable// 2019-5-14 加入放大
          title={this.columnName}
          style={{ width: '80%', height: 1500 }}
          visible={this.visible}
          buttons={buttons}
          onCancel={
            () => this.visible = false
          }
          icon="icon-coms-crm"
          iconBgcolor="#96358a"
        >
          <WeaNewScroll
            ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ofkgi4`} // 2019-5-14 加入滚动条
            height="100%"
          >
            <APIShowTableSingle ecId={`${this && this.props && this.props.ecId || ''}_APIShowTableSingle@9y7hl1`} table={this.subTable} subList={subList} />
          </WeaNewScroll>
        </WeaDialog>
      );
    }
    getBase() {
      const { table, subList } = this.props;
      if (table) {
        const baseLength = table.listSize;
        const title = table.title;
        const list = table.list;
        const columns = table.columns;
        let columnTemp = {};
        const columnsTemp = [];
        columns.map((column,index) => {
          columnTemp = { ...column, sorter: (a, b) => a[column.dataIndex].length - b[column.dataIndex].length };
          columnTemp.title = getCurrentLabel(columnTemp.title);
          if (columnTemp.render) {
            const columnName = columnTemp.columnName;
            const columnTitle = columnTemp.title;
            const rend = {
              render: (text, record) =>
                (<Button
                  ecId={`${this && this.props && this.props.ecId || ''}_Button@v4hzx0@${index}`}
                  type="primary"
                  shape="circle"
                  icon="search"
                  onClick={
                    () => {
                      this.getSubTable(record.key, columnName, columnTitle);
                    }
                  }
                />),
            };
            columnTemp.render = rend.render;
          }
          columnsTemp.push(columnTemp);
        });
        return (
          <div>
            <div className="api_tableName section-title">
              <strong>{getCurrentLabel(title)}</strong>
              <span className="badge margin-l-0-3x">{baseLength}</span>
            </div>
            <div>
              {parseInt(baseLength) > 20 ? <Table
                ecId={`${this && this.props && this.props.ecId || ''}_Table@2ggxma`}
                dataSource={list}
                columns={columnsTemp}
                pagination={{ pageSize: '20' }}
                scroll={{ x: '100%' }}
                bordered
              /> : <Table
                ecId={`${this && this.props && this.props.ecId || ''}_Table@vbfgv2`}
                dataSource={list}
                columns={columnsTemp}
                pagination={false}
                scroll={{ x: '100%' }}
                bordered
              />
              }
            </div>
          </div>
        );
      }
    }
    getSubTable(key, columnName, columnTitle) {
      const { subList } = this.props;
      this.subTable = subList[columnName + key];
      this.columnName = columnTitle;
      this.visible = true;
    }
}
